<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<link rel="stylesheet" href="css/common/common.css">
	<link rel="stylesheet" href="css/cardpack/discovery.css">

	<title>mytitle</title>
	<style type="text/css">
	.tip{
		padding:10px;
		background-color: #000;
		color: #FFF;
		border-radius:10px;
	}
	</style>
</head>

<body id="app" class="usableBill">

<ul class="titleBar">
	<li class="close pad-left">✖</li>
	<li class="title">titleBar</li>
</ul>

<div class="pad" style="padding-top:10px;">

	<dl class="item">
		<dt class="container">
			<i><img width="58" height="58" src=""/></i>
			<div>我的标题</div>
		</dt>
		<dd></dd>
		<dt class="side">
			<span class="fl">tip1</span>
			<span class="fr">时间:2015-8-8</span>
		</dt>
	</dl>
	<dl class="item">
		<dt class="container">
			<i><img width="58" height="58" src=""/></i>
			<div>他的文字</div>
		</dt>
		<dd></dd>
		<dt class="side">
			<span class="fl">tip2</span>
			<span class="fr">时间:2015-8-8</span>
		</dt>
	</dl>

</div>

<button id="btn">显示</button><button id="btn2">隐藏</button>

<div id="dialog" style="width:200px;height:120px;border:1px solid #aaa;display:none;">
	你的对话框，你做主。<br>
	还有你的按钮
</div>

</body>

</html>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/wMobileDialog.js"></script>
<script type="text/javascript">

"use strict";


wMobileDialog.init({
	className:"tip",
	isClickClose:true,
	opacity:.2,
	maskColor:"#F00",
});


//wMobileDialog.init();


$("#btn").click(function(){
	wMobileDialog.show({
		container:$("#dialog")[0],
		mask:true
	});
});

$("#btn2").click(function(){
	wMobileDialog.hide();
});

</script>



